<template>
    <div class="company-main">
        <div class="company-menus">
            <div
                v-for="(item, mindex) in companyData"
                :key="mindex"
                class="company-menu"
                :class="{ active: mindex == companyIndex }"
                @click="fnChangeCompanyIndex(mindex)"
            >
                {{ item.menu }}
            </div>
        </div>
        <div class="company-images">
            <!-- 轮播图片 -->
            <el-carousel
                ref="companyCarousel"
                indicator-position="none"
                arrow="never"
                trigger="hover"
                :height="containerHeight"
                class="desc-carousel"
                :autoplay="false"
                @change="fnOnCompanyIndexChange"
            >
                <el-carousel-item
                    v-for="(citem, cindex) in companyData"
                    :key="cindex"
                >
                    <div class="company-unit">
                        <div
                            v-for="(img, index) in citem.images"
                            :key="index"
                            class="company-img"
                            :style="{
                                backgroundImage: 'url(' + img + ')'
                            }"
                        ></div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            companyIndex: 0,
            containerHeight: '4.8rem',
            companyData: [
                {
                    menu: '快消行业',
                    images: [
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/fastGoods/1.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/fastGoods/2.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/fastGoods/3.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/fastGoods/4.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/fastGoods/5.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/fastGoods/6.png'
                    ]
                },
                {
                    menu: '教育行业',
                    images: [
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/edu/1.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/edu/2.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/edu/3.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/edu/4.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/edu/5.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/edu/6.png'
                    ]
                },
                {
                    menu: '美妆行业',
                    images: [
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/makeup/1.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/makeup/2.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/makeup/3.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/makeup/4.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/makeup/5.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/makeup/6.png'
                    ]
                },
                {
                    menu: '新零售',
                    images: [
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/newsale/1.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/newsale/2.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/newsale/3.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/newsale/4.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/newsale/5.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/newsale/6.png'
                    ]
                },
                {
                    menu: '工厂店',
                    images: [
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/factory/1.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/factory/2.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/factory/3.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/factory/4.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/factory/5.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/factory/6.png'
                    ]
                }
            ]
        }
    },
    mounted() {
        this.fnGetPageData()
    },
    methods: {
        fnChangeCompanyIndex(index) {
            // this.functionCurrent = index
            this.$refs.companyCarousel.setActiveItem(index)
        },
        fnOnCompanyIndexChange(index) {
            this.companyIndex = index
        },
        fnGetPageData() {
            const pageWidth = document.body.clientWidth

            if (pageWidth <= 1440) {
                this.containerHeight = '4.8rem'
            } else {
                this.containerHeight = '500px'
            }
        }
    }
}
</script>

<style scoped lang="less">
.company-main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 0.45rem;
    display: flex;
    flex-direction: row;
    .company-menus {
        flex: 1;
        width: 228rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .company-menu {
        height: 0.72rem;
        line-height: 0.72rem;
        font-size: 24px;
        font-weight: 400;
        color: rgba(63, 69, 75, 1);
        text-align: left;
        padding: 0 10px;
        cursor: pointer;
        &.active {
            color: #20a0ff;
        }
    }
    .company-images {
        width: 9.5616rem;
        height: 4.8rem;
        max-width: 996px;
        max-height: 500px;
    }

    .company-unit {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        background-size: cover;
        background-repeat: no-repeat;
        align-content: space-between;
        padding-top: 1px;
        .company-img {
            width: 31.73%;
            padding-bottom: 23.8%;
            // background-color: #e38989;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }
    }
}
</style>
